<template>
	<view class="container">
		<view class="status_bar_h" :style="{ height: `${statusBarHeight}px` }"></view>
		<view class="bg">
			<view class="head">
				<view class="back" @tap="back">
					<image class="" src="/static/images/fanhui1.png" mode="widthFix" lazy-load="false" />
				</view>
				<view class="title">{{ title }}</view>

			</view>
		</view>
		<view class="register_box">
			<view class="title" @tap="change">
				<text data-flag="0" :class="{ active: flag == 0 }">登入</text>
				<text data-flag="1" :class="{ active: flag == 1 }">註冊</text>
			</view>
			<!-- 登陸 -->
			<view class="login" v-if="flag == 0">
				<view class="phone">
					<view class="img">
						<image src="/static/images/shouji.png" mode=""></image>
					</view>
					<input type="number" v-model="loginInfo.mobile" placeholder="請輸入手機號"
						placeholder-style="font-size:30rpx;color:#999">
				</view>
				<view class="password">
					<view class="img">
						<image src="/static/images/yanzhengma.png" mode=""></image>

					</view>
					<input type="text" v-model="loginInfo.password" :password="showPassword" placeholder="請輸入密碼"
						placeholder-style="font-size:30rpx;color:#999">
					<view @tap="changeShowPassword">
						<image src="/static/images/hide.png" v-if="showPassword"></image>
						<image src="/static/images/show.png" v-else></image>
					</view>
				</view>
				<view class="forget" @tap="change_password">忘記密碼？</view>
				<view class="login_btn" @tap="login_comfirm">登入</view>
			</view>

			<!-- 註冊 -->
			<view class="register" style="margin-top: 20rpx;" v-else>
				<view class="phone">
					<view class="img">
						<image src="/static/images/shouji.png" mode=""></image>
					</view>
					<input type="number" v-model="registerInfo.phone" placeholder="請輸入手機號"
						placeholder-style="font-size:30rpx;color:#999">
				</view>
				<view class="phone_code">
					<view class="img">
						<image src="/static/images/yanzhengma.png" mode=""></image>
					</view>
					<input type="number" v-model="registerInfo.code" placeholder="請輸入驗證碼"
						placeholder-style="font-size:30rpx;color:#999">
					<view class="count_down" @tap="changeCountDown" :class="{ active: showCountDown }">
						<text v-if="!showCountDown">獲取驗證碼</text>
						<view class="start_count_down" v-else>
							<u-count-down :time="countDown*1000" format="ss"></u-count-down>
							<text style="font-size: 20rpx;color:#999">S</text>
						</view>
					</view>
				</view>
				<view class="password">
					<view class="img">
						<image src="/static/images/password.png" mode=""></image>
					</view>
					<input type="text" v-model="registerInfo.password" :password="showPassword" placeholder="請輸入密碼"
						placeholder-style="font-size:30rpx;color:#999">
					<view @tap="changeShowPassword">
						<image src="/static/images/hide.png" v-if="showPassword"></image>
						<image src="/static/images/show.png" v-else></image>
					</view>
				</view>
				<view class="password">
					<view class="img">
						<image src="/static/images/password.png" mode=""></image>
					</view>
					<input type="text" @input="pw_cf_inp" v-model="registerInfo.password_confirm"
						:password="showComfirmPassword" placeholder="確認密碼"
						placeholder-style="font-size:30rpx;color:#999">
					<view @tap="changeShowComfirmPassword">
						<image src="/static/images/hide.png" v-if="showComfirmPassword"></image>
						<image src="/static/images/show.png" v-else></image>
					</view>
					<text class="incorrect" v-show="password_flag">密碼不正確</text>
				</view>
				<view class="phone">
					<view class="img">
						<image src="/static/images/shouji.png" mode=""></image>
					</view>
					<input type="text" v-model="registerInfo.invite_code" placeholder="邀請碼"
						placeholder-style="font-size:30rpx;color:#999">
				</view>
				<view class="register_btn" @tap="register_comfirm">註冊</view>
			</view>

		</view>

		<!-- <view class="other_login" v-if="flag==0">
			<view class="title">
				其他登陸方式
			</view>
			<view class="login_tyep">
				<image src="/static/images/google.png" mode="widthFix"></image>
			</view>
		</view> -->


		<view class="check_box">
			<checkbox-group style="display: flex;align-items: center;">
				<label @tap="changeCheck">
					<checkbox :checked="value" class="checkbox" /><text
						style="font-size: 22rpx;color: #999;font-weight: 400;">我已閲讀并同意《用戶協議》</text>
				</label>
			</checkbox-group>
		</view>

	</view>
</template>

<script>
	import {
		userRegister,
		loginByMobile,
		getCode
	} from "@/api/login_register.js"
	export default {
		data() {
			return {
				// 0 登陸   1 註冊
				flag: 0,
				showPassword: true,
				showComfirmPassword: true,
				showCountDown: false,
				title: '',
				// 註冊信息
				registerInfo: {
					phone: "",
					code: "",
					password: "",
					password_confirm: "",
					invite_code: ''
				},
				password_flag: false,

				// 登陸信息
				loginInfo: {
					mobile: "",
					password: "",
					code: ""
				},
				value: false,
				token: null,
				statusBarHeight: 0,
				countDown: 0,
			};
		},
		methods: {
			change(e) {
				// console.log(e.target.dataset.code)
				if (e.target.dataset.flag) {

					this.flag = e.target.dataset.flag
					this.title = this.flag == 0 ? '登入' : '註冊'
					// if (this.flag == 1) {
					// 	this.showCountDown = false
					// }
				}
			},
			changeShowPassword() {
				this.showPassword = !this.showPassword
			},
			changeShowComfirmPassword() {
				this.showComfirmPassword = !this.showComfirmPassword
			},
			changeCountDown() {
				if (!this.showCountDown) {
					// this.showCountDown = true
					// setTimeout(() => {
					// 	this.showCountDown = false
					// }, 60 * 1000)
					getCode({
						code_type: 'register',
						mobile: this.registerInfo.phone
					}).then(res => {
						// console.log(res, "11111")
						if (res.code == 1) {
							uni.showToast({
								title: '驗證碼已發送',
								icon: 'success'
							})
							this.countDown = 60
							this.showCountDown = true
							let t = setInterval(() => {
								this.countDown--
								if (!this.countDown) {
									this.showCountDown = false
									clearInterval(t)
								}
							}, 1000)
							setTimeout(() => {
								this.showCountDown = false
								clearInterval(t)
							}, 60 * 1000)

						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						}
					})
				}

			},

			pw_cf_inp(e) {
				// console.log(e, "確定密碼")
				if (e.detail.value !== this.registerInfo.password) {
					this.password_flag = true
				} else {
					this.password_flag = false
				}
			},

			// 註冊
			register_comfirm() {
				let _this = this
				// console.log(this.registerInfo, "註冊信息")
				// const regExp = /^[0][9]d{8}$/
				const regExp = /^[0][9][0-9]{8}$/
				console.log(regExp.test(this.registerInfo.phone), "正則")

				if (!regExp.test(this.registerInfo.phone)) {
					// console.log("請輸入正確的手機號碼")
					uni.showToast({
						title: "請輸入正確的手機號碼",
						icon: "error",
						duration: 2000
					})
				}
				// else if (this.registerInfo.code == "") {
				// 	// console.log("請輸入驗證碼")
				// 	uni.showToast({
				// 		title: "請輸入驗證碼",
				// 		icon: "error",
				// 		duration: 2000
				// 	})
				// } 
				else if (this.registerInfo.password == "") {
					// console.log("請輸入密碼")
					uni.showToast({
						title: "請輸入密碼",
						icon: "error",
						duration: 2000
					})
				} else if (this.registerInfo.password !== this.registerInfo.password_confirm) {
					// console.log("請確認密碼是否一致")
					uni.showToast({
						title: "密碼不一致",
						icon: "error",
						duration: 2000
					})
				} else if (!this.value) {
					uni.showToast({
						title: "請同意用戶協議",
						icon: "error",
						duration: 2000
					})
				} else {

					userRegister({
						mobile: this.registerInfo.phone,
						code: this.registerInfo.code,
						password: this.registerInfo.password,
						password_confirm: this.registerInfo.password_confirm,
						invite_code: this.registerInfo.invite_code
					}).then(res => {
						console.log(res, "註冊信息")
						if (res.code !== 200) {
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 2000
							});


						} else {
							uni.showToast({
								title: "註冊成功",
								duration: 2000,
							})
							setTimeout(() => {
								this.flag = "0"
								this.registerInfo.phone = ""
								this.registerInfo.code = ""
								this.registerInfo.password = ""
								this.registerInfo.password_confirm = ""
								this.registerInfo.invite_code = ""
							}, 2000)

						}
					})
				}
			},

			// 登陸
			login_comfirm() {
				if (this.loginInfo.mobile == "") {
					uni.showToast({
						title: "請輸入手機號",
						icon: "error",
						duration: 2000
					})
				} else if (this.loginInfo.password == "") {
					uni.showToast({
						title: "請輸入密碼",
						icon: "error",
						duration: 2000
					})
				} else if (!this.value) {
					uni.showToast({
						title: "請同意用戶協議",
						icon: "error",
						duration: 2000
					})
				} else {

					const {
						deviceBrand,
						deviceModel,
						deviceId, // 设备ID
						osName,
						osVersion
					} = uni.getSystemInfoSync();

					loginByMobile({
						mobile: this.loginInfo.mobile,
						password: this.loginInfo.password,
						token_id: deviceId
					}).then(res => {
						// console.log(res,"登陸")
						if (res.code !== 200) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						} else {
							console.log(res.data.token, "登陸成功")
							// 保存token
							uni.setStorageSync('ONEtoken', res.data.token)
							uni.setStorageSync('userInfo', JSON.stringify(res.data))
							uni.showToast({
								title: res.msg,
								duration: 1000
							})
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/index/index'
								})
							}, 1000)
						}
					})
				}
			},
			changeCheck() {
				this.value = !this.value
				// console.log(this.value)
			},
			back() {
				this.token = uni.getStorageSync('ONEtoken')
				if (this.token) {
					uni.navigateBack()
				} else {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}
			},
			change_password() {
				uni.navigateTo({
					url: "/pages/change_password/change_password"
				})
			}
		},
		onLoad(option) {
			// console.log(option,"查看")
			this.flag = option.flag
			this.title = this.flag == 0 ? '登入' : '註冊'
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		}
	}
</script>

<style lang="less" scoped>
	.container {
		height: calc(100vh - 90rpx);

		.bg {
			// width: 750rpx;
			height: 380rpx;
			background-image: url(@/static/images/bg.jpg);
			background-size: cover;
			background-position-y: -100rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			opacity: 1;
		}

		.status_bar_h {
			background-color: #39B19D;
		}

		.head {
			height: 90rpx;
			padding: 10rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			// padding-top: 90rpx;

			.back {
				position: absolute;
				left: 30rpx;

				image {
					width: 45rpx;
				}
			}

			.title {
				color: #fff;
				font-size: 36rpx;
				font-weight: bold;
			}
		}



		.register_box {
			width: 618rpx;
			min-height: 552rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			margin: -150rpx auto;
			padding-bottom: 30rpx;

			.title {
				padding: 54rpx 119rpx;
				box-sizing: border-box;
				font-size: 30rpx;

				text {
					margin-right: 34rpx;
				}

				.active {
					border-bottom: 7rpx solid #39B19D;
					padding-bottom: 10rpx;
					color: #39B19D;
				}
			}

			.login,
			.register {
				// padding: 0 61rpx;
				margin-top: 79rpx;

				.phone,
				.password,
				.phone_code {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid #39B19D;
					padding-bottom: 14rpx;
					margin: 0 61rpx;
					margin-bottom: 46rpx;
					position: relative;

					.img {
						width: 36rpx;
						height: 36rpx;
						// background: skyblue;
						margin: 0 35rpx 0 10rpx;

						image {
							width: 36rpx;
							height: 36rpx;
						}
					}

					input {
						flex: 1;
					}

					image {
						width: 44rpx;
						height: 44rpx;
					}

					.count_down {
						width: 109rpx;
						height: 38rpx;
						background: #39B19D;
						border-radius: 30rpx 30rpx 30rpx 30rpx;
						opacity: 1;
						text-align: center;
						line-height: 38rpx;
						color: #fff;
						font-size: 18rpx;
						padding: 7rpx 10rpx;

						.start_count_down {
							width: 100%;
							display: flex;
							justify-content: center;
							align-items: center;

						}
					}

					.active {
						background: #f0f0f0;
					}

					.incorrect {
						color: red;
						font-size: 26rpx;
						position: absolute;
						left: 0%;
						bottom: -70%;

					}
				}

				.login_btn,
				.register_btn {
					margin-top: 45rpx;
					// width: 618rpx;
					height: 90rpx;
					background: #39B19D;
					border-radius: 62rpx 62rpx 62rpx 62rpx;
					opacity: 1;
					line-height: 90rpx;
					text-align: center;
					color: #fff;
					font-size: 40rpx;
				}
			}
		}

		.other_login {
			.title {
				margin-top: 158rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20rpx;
				color: #999;

				&::before {
					content: "";
					width: 160rpx;
					height: 0rpx;
					opacity: 0.61;
					border: 1rpx solid #707070;
					margin-right: 35rpx;
				}

				&::after {
					content: "";
					width: 160rpx;
					height: 0rpx;
					opacity: 0.61;
					border: 1rpx solid #707070;
					margin-left: 35rpx;
				}
			}

			.login_tyep {
				display: flex;
				justify-content: center;

				image {
					width: 151rpx;
					// height: 59rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					opacity: 1;
				}
			}
		}

		.check_box {
			position: absolute;
			bottom: 105rpx;
			left: 0%;
			right: 0%;
			display: flex;
			justify-content: center;
		}
	}

	/deep/uni-checkbox .uni-checkbox-input {
		border-radius: 50%;
		background-color: #fff;
		width: 30rpx;
		height: 30rpx;
	}

	/deep/uni-checkbox:not([disable]) .uni-checkbox-input:hover {
		border-color: #fff;
		border: 1rpx solid #999;
	}

	/deep/uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		background-color: #39B19D !important;
		border-color: #39B19D !important;
		color: #fff !important;
	}

	.forget {
		padding: 0 61rpx;
		text-align: end;
	}
</style>